<template>
	<view class="content">
		<u--text :text="title" style="font-size: 8px;"></u--text>
		<view style="height: 5px;padding: 10px;">选项</view>
		<view style="padding: 2px;">
			A:<u--text :text="option_a" style="font-size: 8px;"></u--text>
		</view>
		<view style="padding: 2px;">
			B:<u--text :text="option_b" style="font-size: 8px;"></u--text>
		</view>
		<view style="padding: 2px;">
			C:<u--text :text="option_c" style="font-size: 8px;"></u--text>
		</view>
		<view style="padding: 2px;">
			D:<u--text :text="option_d" style="font-size: 8px;"></u--text>
		</view>
		<view style="padding: 2px;">
			答案:<u--text :text="showAnswer" style="font-size: 8px;"></u--text>
		</view>
		
						
		<u-button text="下一题" type="success" @click="showTitle"></u-button>
		<view style="height: 10px;"></view>
		<u-button text="随机题" type="success" @click="showRandWord"></u-button>
		<view style="height: 10px;"></view>
		<u-button text="答案提示" type="success" @click="showAnswerTip"></u-button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"",
				option_a:"",
				option_b:"",
				option_c:"",
				option_d:"",
				wordId:0,
				answer:"",
				showAnswer:"",
			};
		},
		onShow() {
			this.showTitle()
		},
		methods:{
			showTitle(){
				this.wordId += 1;
				this.showAnswer = "";
				uni.$u.http.get('/api/encyclopedia/info?id='+this.wordId, {}).then(res => {
					this.title = res.data.data.title
					this.option_a = res.data.data.option_a
					this.option_b = res.data.data.option_b
					this.option_c = res.data.data.option_c
					this.option_d = res.data.data.option_d
					this.answer = res.data.data.answer
				}).catch(err => {
				
				})
			},
			showRandWord(){
				this.showAnswer = "";
				uni.$u.http.get('/api/encyclopedia/randomTitle', {}).then(res => {
					this.title = res.data.data.title
					this.option_a = res.data.data.option_a
					this.option_b = res.data.data.option_b
					this.option_c = res.data.data.option_c
					this.option_d = res.data.data.option_d
					this.answer = res.data.data.answer
				}).catch(err => {
				
				})
			},
			showAnswerTip(){
				this.showAnswer = this.answer
			}
		}
	};
</script>

<style>
	.content{
		padding: 5px;
	}
</style>
